<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/reset.css' %}">
    <link rel="stylesheet" href="{% static 'css/mi.css' %}">
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="{% static 'js/script.js' %}"></script>
</head>
<body>
    <!--橙色导航 start-->
    <div class="orange-nav">
        <div class="wrap">
            <ul class="orange-nav-left">
                <li><a href="/">首页</a><span>|</span></li>
                <li><a href="#">大米商城</a><span>|</span></li>
                <li><a href="#">大米澎湃OS</a><span>|</span></li>
                <li><a href="#">大米汽车</a><span>|</span></li>
                <li><a href="#">智能生活</a><span>|</span></li>
                <li><a href="/message">留言</a></li>
            </ul>
            <ul class="orange-nav-right">
                {% if request.session.is_active %}
                    <li><a href="/home/">我的</a><span>|</span></li>
                    <li><a href="/logout/">退出</a><span>|</span></li>
                {% else %}
                    <li><a href="/login/">登录</a><span>|</span></li>
                    <li><a href="/register/">注册</a><span>|</span></li>
                {% endif %}
                <li class="cart">
                    <a href="#">
                        <img src="{% static 'images/shop.jpg' %}">
                        <i>购物车</i>
                    </a>
                    <div class="cart-list">
                        购物车中还没有商品，赶快选购吧！
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--橙色导航 end-->

    <!--白色导航 start-->
    <div class="white-nav">
        <div class="wrap">
            <div class="logo">
                <img src="{% static 'images/mi.jpg' %}" alt="" class="home">
            </div>
            <div class="nav-bar">
                <ul>
                    <li><a href="#">电子产品</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">服饰</a></li>
                    <li><a href="#">美妆</a></li>
                    <li><a href="#">食品</a></li>
                    <li><a href="#">户外运动</a></li>
                    <li><a href="#">母婴用品</a></li>
                    <li><a href="#">家居生活</a></li>
                </ul>
            </div>
            <form action="/search/" method="get">
                <div class="search">
                    <input type="text" name="keyword" placeholder="搜索">
                    <button type="submit"></button>
                </div>
            </form>
        </div>
    </div>
    <!--白色导航 end-->
    <div class="container">
        <header>
            <h1>欢迎，{{ username}}!</h1>
        </header>
        <section id="personal-info">
            <h2>个人信息</h2>
            <div class="account-settings-content">
                <div class="form-row user-info-container">
                    <img src="path/to/avatar.jpg" alt="用户头像" class="user-avatar">
                    <div class="form-info">
                        <label for="username">用户名：{{username}}</label>
                    </div>
                </div>
                <div class="button-container">
                    <button type="button" onclick="location.href='/cart'">购物车</button>
                    <button type="button" onclick="location.href='/order'">订单管理</button>
                    <button type="button" onclick="location.href='/requestreturn'">退货管理</button>
                    <button type="button" onclick="location.href='/personal'">个人设置</button>
                    <button type="button" onclick="location.href='/comment'">评论查看</button>
                </div>
            </div>
        </section>
        </main>
    </div>

    <!-- 页脚模块 start -->
    <div class="footer">
        <div class="wrap">
            <div class="footer-service">
                <ul>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe629;</i>
                            <span>规则协议</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe629;</i>
                            <span>新手上路</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe629;</i>
                            <span>大米特色</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe629;</i>
                            <span>更多信息</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe629;</i>
                            <span>更多信息</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-link">
                <ul>
                    <li>选购指南</li>
                    <li><a href="#">电子产品</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">服饰</a></li>
                    <li><a href="#">美妆</a></li>
                    <li><a href="#">食品</a></li>
                </ul>
                <ul>
                    <li>帮助中心</li>
                    <li><a href="#">账户管理</a></li>
                    <li><a href="#">个人设置</a></li>
                    <li><a href="#">更多</a></li>
                </ul>
                <ul>
                    <li>服务中心</li>
                    <li><a href="#">订单查询</a></li>
                    <li><a href="#">保障服务</a></li>
                    <li><a href="#">售后政策</a></li>
                </ul>
                <ul>
                    <li>线下门店</li>
                    <li><a href="#">大米之家</a></li>
                    <li><a href="#">服务网点</a></li>
                    <li><a href="#">授权体验店</a></li>
                </ul>
                <ul>
                    <li>关于大米</li>
                    <li><a href="#">了解大米</a></li>
                    <li><a href="#">加入大米</a></li>
                    <li><a href="#">投资者关系</a></li>
                    <li><a href="#">可持续发展</a></li>
                </ul>
                <ul>
                    <li>加入我们</li>
                    <li><a href="#">新浪微博</a></li>
                    <li><a href="#">官方微信</a></li>
                    <li><a href="#">账户管理</a></li>
                </ul>
                <div class="footer-aside">
                    <p class="tel">123-123-5678</p>
                    <p class="time">营业时间：8:00-18:00</p>
                    <a href="#" class="kefu">人工客服</a>
                    <div class="follow">
                        关注大米:
                        <img src="{% static 'images/wb.png' %}" alt="">
                        <img src="{% static 'images/wx.png' %}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 页脚模块 end -->
</body>
</html>